<%@page import="model.User"%>
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z" %> 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div id="da-header-toolbar" class="clearfix">
    <div id="da-user-profile">
        <div id="da-user-avatar">
        <%User user =  (User)session.getAttribute("user");
        if(user == null) user = new User();
        String avatar = "http://localhost:8080/EOnline/"+user.getAvatar();
        %>
            <img src="<%=avatar %>" alt="" height="80px" width="80px"/>
        </div>
        <div id="da-user-info">
            <%=user.getUsername() %>
            <span class="da-user-title">Creative Director</span>
        </div>
        <ul class="da-header-dropdown">
            <li class="da-dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </li>
            <li class="da-dropdown-divider"></li>
            <li><a href="your-url">Dashboard</a></li>
            <li><a href="your-url">Dashboard</a></li>
            <li><a href="your-url">Dashboard</a></li>
        </ul>
    </div>

    <div id="da-header-button-container">
        <ul>
            <li class="da-header-button notif">
               <span class="da-button-count">32</span>
               <a href="#">Notifications</a>
                <ul class="da-header-dropdown">
                    <li class="da-dropdown-caret">
                        <span class="caret-outer"></span>
                        <span class="caret-inner"></span>
                    </li>
                    <li>
                    <span class="da-dropdown-sub-title">Notifications</span>
                    <ul class="da-dropdown-sub">
                        <li class="unread">
                            <a href="#">
                                <span class="message">
                                    Lorem ipsum dolor sit amet
                                </span>
                                <span class="time">
                                    January 21, 2012
                                </span>
                            </a>
                        </li>
                    </ul>
                    <a class="da-dropdown-sub-footer">
                        View all notifications
                    </a>
                    </li>
                </ul>
            </li>
           <li class="da-header-button message">
                <span class="da-button-count">5</span>
                <a href="#">Messages</a>
                <ul class="da-header-dropdown">
                    <li class="da-dropdown-caret">
                        <span class="caret-outer"></span>
                        <span class="caret-inner"></span>
                    </li>
                    <li>
                    <span class="da-dropdown-sub-title">Messages</span>
                    <ul class="da-dropdown-sub">
                            <li class="unread">
                                <a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <a class="da-dropdown-sub-footer">
                           View all messages
                        </a>
                    </li>
                </ul>
            </li>
           <li class="da-header-button logout">
	           <z:page>
					<z:window>
						<z:a href="#" id="linkLogout" sclass="da-header-button-logout">Logout</z:a>
					</z:window>
				</z:page>
                
           	
            </li>
        </ul>
    </div>
</div>